<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/main.css" rel="stylesheet"/>
    <link href="fonticons/iconfont.css" rel="stylesheet"/>
	
</head>
<body>
	<header class="mui-bar mui-bar-nav" >
		<div class="mui-margin-25"></div>
		<h1 class="mui-title"></h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" to="chat">
			<span class="mui-icon iconfont icon-hc-im-an-artist-and-"></span>
			<span class="mui-tab-label">聊天</span>
		</a>
		<a class="mui-tab-item" to="friendList">
			<span class="mui-icon  iconfont icon-haoyouliebiao"></span>
			<span class="mui-tab-label">好友</span>
		</a>
		<a class="mui-tab-item" to="found">
			<span class="mui-icon iconfont icon-faxian"></span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" to="me">
			<span class="mui-icon iconfont icon-me"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	
	<script type="text/javascript" charset="utf-8">
	  	mui.init();
		mui.plusReady(function(){
			// 初始化页面配置
			initPageInfo();
			// 初始化tab触摸事件
			tabSettingHolder.init();
			plus.nativeUI.closeWaiting();
			plus.webview.currentWebview().show();
		
		})
		
		// 页面配置信息
		const pageSetting = {
			globalStyle:{
				top:"70px",
				bottom:"50px"
			},
			pages:[
				{
					pageId:"chat",
					pageUrl:"pages/tab/chat.html",
					meta:{
						title:"聊天"
					}
				},
				{
					pageId:"friendList",
					pageUrl:"pages/tab/friendList.html",
					meta:{
						title:"好友列表"
					}
				},
				{
					pageId:"found",
					pageUrl:"pages/tab/found.html",
					meta:{
						title:"发现"
					}
				},
				{
					pageId:"me",
					pageUrl:"pages/tab/me.html",
					meta:{
						title:"我的"
					}
				}
			]
		}
		
		// tab配置
		const tabSettingHolder = {
			pageResovler: e => {
				
				plus.webview.show(e,"fade-in",50,()=>{
					for (var i = 0; i < pageSetting.pages.length; i++) {
						if(pageSetting.pages[i].pageId === e){
							mui('.mui-title')[0].innerHTML= pageSetting.pages[i].meta.title;
						}else{
							plus.webview.hide(pageSetting.pages[i].pageId);
						}
					}
				});
				
			},
			init(){
				mui(".mui-bar.mui-bar-tab").on("tap","a",function(){
					var to = this.getAttribute("to");
					tabSettingHolder.pageResovler(to);
				});
			}
			
		}
			
		// 初始化页面信息
		function initPageInfo(){
			const _currentWebview = plus.webview.currentWebview();
			plus.webview.currentWebview().addEventListener("show",function(){
				if(plus.webview.currentWebview().opener()){
					 plus.webview.currentWebview().opener().close();
				}
			})
			mui('.mui-title')[0].innerHTML=pageSetting.pages[0].meta.title;
			// 设置状态栏的背景颜色
			plus.navigator.setStatusBarBackground("#010101")
			// 得到当前webview
			var currentWebview = plus.webview.currentWebview();
			
			for (var i = 0; i < pageSetting.pages.length; i++) {
				// 创建tab webview页面
				var webview = plus.webview.create(pageSetting.pages[i].pageUrl,pageSetting.pages[i].pageId,pageSetting.globalStyle);
				// 默认全部隐藏
				webview.hide();
				
				// 添加页面到当前页（index）webview中
				currentWebview.append(webview);
			}
			plus.webview.show(pageSetting.pages[0].pageId,"fade-in");
		}
	</script>
</body>
</html>